<!--左边tree数据-->
<template>
  <div class="left-tree" :style="{width: (isShowLeftTree ? '0': '18%')}">
    <div class="left-btns">
      <a-button type="primary" block @click="onFilingScope">{{ headTitle }}({{ isShowFiling ? '归档范围' : '分类' }})</a-button>
    </div>
    <div class="left-tab">
      <a-tabs
        v-model="activeName"
        tab-position="top"
        size="small"
        :tabBarGutter="0"
        @change="tabChange"
        v-if="tabList.length > 0"
        style="text-align: center;">
        <a-tab-pane v-for="item in tabList" :key="item.mode" :tab="item.name">
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="treeNode" v-if="!isShowFiling">
      <a-tree
        blockNode
        show-line
        :treeData="treeData"
        defaultExpandAll
        v-if="treeData.length > 0">
      </a-tree>
      <a-empty v-else />
    </div>
    <div class="treeNode" v-else>
      <ul
        id="tree"
        class="ztree"
        style="height: 100%;width: 100%;"
      />
      <!-- <a-tree
        blockNode
        show-line
        :treeData="treeData2"
        defaultExpandAll
        v-if="treeData2.length > 0">
      </a-tree>
      <a-empty v-else /> -->
    </div>
    <div class="handle" @click="treeToggle">
      <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
      <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import 'ztree'
import 'ztree/css/zTreeStyle/zTreeStyle.css'
export default {
  name: '',
  components: {
  },
  props: {
    isShowLeftTree: {
      type: Boolean,
      default: () => {}
    },
    treeData: {
      type: Array,
      default: () => {}
    },
    tabList: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      activeName: '1',
      headTitle: null, // 按钮标题
      isShowFiling: false, // 默认展示分类数据
      treeData2: [],
      setting: {
        data: {
          key: {
            name: 'title'
          }
        },
        view: {
          fontCss: {
            color: 'rgba(0, 0, 0, 0.65)'
          }
        },
        callback: {
          onClick: this.chooseNode, // 节点点击事件
          onExpand: this.treeExpand // 节点展开事件
        }
      }
    }
  },
  created () {
    const meta = this.$route.meta
    this.headTitle = meta.title
  },
  mounted () {},
  methods: {
    ztreeInit () {
      const param = { searchList: [{ FM_ID: '1304229574116249600' }], flag: 2, order: [{ Order: 1, Param: 'Catalog_Order' }] }
      this.$vueAjax.get('Sys_Base_Catalog/get', param).then(res => {
        console.log(res)
        const catalogTreeList = this.convertToTreeData(res.List, null)
        console.log(catalogTreeList)
        const treeObj = $.fn.zTree.init($('#tree'), this.setting, catalogTreeList)
        treeObj.expandAll(true)
      })
    },
    convertToTreeData (data, pid) {
      const result = []
      let temp = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].Catalog_Father === pid) {
          const obj = { ...data[i], title: `${data[i].Catalog_Code} ${data[i].Catalog_Name}`, key: data[i].Catalog_ID }
          temp = this.convertToTreeData(data, data[i].Catalog_ID)
          if (temp.length > 0) {
            obj.children = temp
          }
          result.push(obj)
        }
      }
      return result
    },
    chooseNode (event, treeId, treeNode) {
      console.log(event, treeId, treeNode)
    },
    treeExpand (event, treeId, treeNode) {
      console.log(event, treeId, treeNode)
    },
    // 左侧显示与隐藏事件
    treeToggle () {
      this.$emit('update:isShowLeftTree', !this.isShowLeftTree)
    },
    tabChange (key) {
      this.$emit('tabClick', key)
    },
    onFilingScope () {
      this.isShowFiling = !this.isShowFiling
      this.ztreeInit()
    }
  }
}
</script>

<style lang="less" scoped>
.left-tree {
  float: left;
  width: 18%;
  height: 100%;
  background: #FFF;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  .left-btns {
    height: 50px;
    background: #f9f9f9;
    padding: 0 20px;
    line-height: 50px;
    border-bottom: 1px solid #e8e8e8;
  }
  .left-tab {
    .ant-tabs {
      /deep/ .ant-tabs-bar {
        margin: 0;
      }
    }
  }
  .treeNode {
    flex: 1;
    padding: 10px;
    overflow: auto;
  }
  .handle {
    position: absolute;
    right: -18px;
    top: 50%;
    margin-top: -32px;
    z-index: 100;
    cursor: pointer;
  }
}
</style>
